<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            font-family: Consolas;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1> {{title|safe}} </h1>
        <ul>
            <li v-for="(item, index) in test"> [[index]] ===== [[ item[0] ]]</li>
        </ul>

        <h1>  [[   myList[index][0]  ]]  </h1>
        <button @click="change_index(1)">add</button>

        <input type="text" v-model="inputValue" @input="handleInput()" style="padding: 12px; font-size: 32px;">

        <ul>
            <li v-for="(item, index) in myList">
                [[index]] ===== [[ item[0] ]]
            </li>
        </ul>
        <h3>[[html_]]</h3>
        <h3 v-html="[[html_]]"></h3>
        <h1> [[title]] </h1>
        <h1> 三种方式 : </h1>
        <h2>1:纯 h3</h2>
        <h2> 2:white-space: pre-line; </h2>
        <h2>3:pre </h2>

    </div>
</body>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.15/vue.global.min.js" type="application/javascript"></script>
<script>
    var data = "";
    var title = '{{ title|safe }}'
    console.log(title);

    var myList = '{{ myList|safe }}'
    console.log(JSON.parse(myList));

    const { createApp } = Vue
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                title:title,
                test: "TEST-TEST",
                article: "{}",
                users: ["tom", "jack", "willan"],
                test: [
                    [1, 2, 3],
                    [22, 33, 44]
                ],
                index: 0,
                inputValue: "",
                html_: '<h1>  v-html  标签__:===+++---): </h1>',
                myList: JSON.parse(myList)
            }
        },
        methods: {
            add: function () {
                alert("哈哈哈哈 233333333")
            },
            change_index: function (eee) {
                this.index++;
                console.log(this.myList[this.index][0]);
            },
            handleInput: function (eee) {
                console.log(this.inputValue);
                if(this.inputValue === this.myList[this.index][0] ){
                    alert("yes")
                }
            },
            get_: function () {
                // $.ajax的this作用域已经变了，所以要用一个变量接收 vue实例
                let this_ = this;
                var name = "威廉";
                var address = "西雅图";
                $.ajax({
                    type: "POST",
                    url: "/find_by_address/",
                    data: { "name": name, "address": address },
                    datatype: "json",
                    success: function (ret) {
                        // $('#result').text(ret.address)
                        this_.article = ret;  // 返回的是对象类型, 不是单纯的 string 
                        console.log(this_.article);
                    },
                    //调用出错执行的函数
                    error: function () {
                        //请求出错处理
                    }
                })
            }
        }
    }).mount('#app')

    function get_data(params) { }
    $(document).ready(function () { });

</script>

</html>